<!DOCTYPE html>
<html lang="en">
<head>
	<title>Title</title>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<!-- 如果当前环境是IE则设置为IE最高版本 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
	<!-- 设置视口大小与屏幕相同 -->
	<meta name="viewport"
				content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<!-- 禁止缓存 -->
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-store, must-revalidate"/>
	<meta http-equiv="expires" content="0"/>
	<!-- 禁止识别电话号，邮件，地点(跳转至地图) -->
	<meta name="format-detection" content="telephone=no, email=no, adress=no" searchtype="map">
	<!-- 删除默认的苹果工具栏和菜单栏 -->
	<meta name="apple-mobile-web-app-capable" content="no">
	<!-- 控制状态栏显示样式 -->
	<meta name="apple-mobile-web-app-status-bar-style" content="white">
	<style>
		* {
			padding: 0;
			margin: 0;
		}
	</style>
</head>
<body>
<script src="./three.js"></script>
<script>
	// 生成随机小数
	var randomFloat = function (min, max) {
		return Math.random() * (max - min) + min;
	};

	var rendererWidth = document.documentElement.clientWidth,
					rendererHeight = document.documentElement.clientHeight,
					maxZ = 1000
					;

	// 场景
	var scene = new THREE.Scene();
	/*// 背景图片
	var urls = [
		'http://localhost:8000/three.js/z/img/universe.jpg',
		'http://localhost:8000/three.js/z/img/universe.jpg',
		'http://localhost:8000/three.js/z/img/universe.jpg',
		'http://localhost:8000/three.js/z/img/universe.jpg',
		'http://localhost:8000/three.js/z/img/universe.jpg',
		'http://localhost:8000/three.js/z/img/universe.jpg',
	];
	var textureCube = new THREE.CubeTextureLoader().load(urls);
	scene.background = textureCube;*/
	// 背景图片
	var geometry = new THREE.BoxBufferGeometry(555, 555, 1);
	var texture = new THREE.TextureLoader().load('http://localhost:8000/three.js/z/img/universe.jpg');
	var material = new THREE.MeshBasicMaterial({map: texture});
	mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	/*// 文字
	 var geometry = new THREE.TextGeometry('11111', {
	 size: 10,
	 height: 0,
	 weight: 'normal',
	 font: 'optimer',
	 style: 'normal',
	 bevelThickness: 1,
	 bevelSize: 1,
	 bevelSegments: 1,
	 curveSegments: 50,
	 steps: 1
	 });
	 var material = new THREE.MeshBasicMaterial({color: 0xff0000});
	 var mesh = new THREE.Mesh(geometry, material);
	 scene.add(mesh);*/
	/*// 图片
	 THREE.ImageUtils.loadTexture('http://10.0.69.156:8000/NodeProject/test/threejs/img/universe.jpg');
	 var geometry = new THREE.TextGeometry('11111', {
	 size: 10,
	 height: 0,
	 weight: 'normal',
	 font: 'optimer',
	 style: 'normal',
	 bevelThickness: 1,
	 bevelSize: 1,
	 bevelSegments: 1,
	 curveSegments: 50,
	 steps: 1
	 });
	 var material = new THREE.MeshBasicMaterial({color: 0xff0000});
	 var mesh = new THREE.Mesh(geometry, material);
	 scene.add(mesh);*/
	var geometry = new THREE.SphereGeometry(5, 32, 32);
	var material = new THREE.MeshLambertMaterial({
		color: 0xff1100
	});

	/*// 球体
	 for(var i=0;i<50;i++){
	 var mesh = new THREE.Mesh(geometry, material);
	 mesh.position.x = randomFloat(- 100, 100);
	 mesh.position.y = randomFloat(- 100, 100);
	 mesh.position.z = randomFloat(0, maxZ);
	 scene.add(mesh);
	 }
	 // 创建一个点光源
	 var pointLight = new THREE.PointLight(0xFFFFFF, 1.5);
	 // 设置点光源的位置
	 pointLight.position.x = 0;
	 pointLight.position.y = 50;
	 pointLight.position.z = maxZ;
	 // 将点光源加入场景
	 scene.add(pointLight);*/

	// 立方体图片
	var texture = new THREE.TextureLoader().load('http://localhost:8000/three.js/z/img/1.png');
	var geometry = new THREE.BoxBufferGeometry(5, 5, 5);
	var material = new THREE.MeshBasicMaterial({map: texture});

	for (var i = 0; i < 1; i++) {
		mesh = new THREE.Mesh(geometry, material);
//		mesh.position.x = randomFloat(-100, 100);
//		mesh.position.y = randomFloat(-100, 100);
//		mesh.position.z = randomFloat(0, maxZ);
		mesh.position.x = 0;
		mesh.position.y = 0;
		mesh.position.z = 0;
		scene.add(mesh);
	}
	// 创建一个点光源
	var pointLight = new THREE.PointLight(0xFFFFFF, 1.5);
	// 设置点光源的位置
	pointLight.position.x = 0;
	pointLight.position.y = 50;
	pointLight.position.z = maxZ;
	// 将点光源加入场景
	scene.add(pointLight);

	// 相机
	var camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 0.1, maxZ);
	camera.position.z = 5;

	// 渲染器
	var renderer = new THREE.WebGLRenderer({
		antialias: false,       //是否开启反锯齿
		precision: "highp",    //着色精度选择
//		alpha: true,           //是否可以设置背景色透明
		premultipliedAlpha: false,
		stencil: false,
		preserveDrawingBuffer: true, //是否保存绘图缓冲
		maxLights: 1           //maxLights:最大灯光数
	});
	renderer.setSize(rendererWidth * 3, rendererWidth * 3);
	renderer.domElement.style.width = rendererWidth + 'px';
	renderer.domElement.style.height = rendererHeight + 'px';
	//	renderer.setClearColor(0x000000, 0.9);
	document.body.appendChild(renderer.domElement);

	// instantiate a loader
	var loader = new THREE.ImageLoader();

	/*// 加载图片
	 // load a image resource
	 loader.load(
	 // resource URL
	 'http://localhost:8000/three.js/z/img/universe.jpg',
	 // Function when resource is loaded
	 function (image) {
	 // do something with it
	 // like drawing a part of it on a canvas
	 var canvas = document.createElement('canvas');
	 var context = canvas.getContext('2d');
	 context.drawImage(image, 100, 100);
	 document.body.appendChild(canvas);
	 },
	 // Function called when download progresses
	 function (xhr) {
	 console.log((xhr.loaded / xhr.total * 100) + '% loaded');
	 },
	 // Function called when download errors
	 function (xhr) {
	 console.log('An error happened');
	 }
	 );*/


	(function () {
//		mesh.rotation.x += 0.1;
//		mesh.rotation.y += 0.1;
		camera.position.z += 1;
		renderer.render(scene, camera);
		window.requestAnimationFrame(arguments.callee);
	})();
</script>
</body>
</html>